<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>购物车</title>
    <link rel="stylesheet" type="text/css" href="../../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../../css/style.css"/>
    <style>
        html,body{
            background: #fff;
        }
        .inner_header{
            font-size: 1.6rem;
            color: #fff;
            font-weight: 600;
            height: 6.9rem;
            margin: 0;
            padding: 2.4rem 0 0 0;
            box-sizing: border-box;
            background: none!important;
            /*box-shadow: 0rem 0rem 0.8rem 0rem rgba(0, 0, 0, 0.08);*/
            background: none!important;
        }
        .inner_header .aui-title{
            color: #fff!important
        }
        .header{
            width: 100%;
            margin:0 0 1.45rem 0;
            height: 25rem;
            background: url(../../../image/capital/bg1.png);
            background-size:100% 100%;
            float: left;
            position: relative;
        }
        .content{
            width: 100%;
            float: left;
            margin: 6.9rem 0 0 0;
        }
        .content_title{
            width: 100%;
            height: 1.25rem;
            font-weight: 600;
        	font-size: 1.3rem;
        	letter-spacing: 0.03rem;
        	color: #fffefe;
            text-align: center;
            margin: 1.75rem 0 1rem 0;
            opacity: 0.63;
        }
        .content_money{
            width: 100%;
            height: 3.5rem;
        	font-weight: 600;
        	font-size: 3.5rem;
        	letter-spacing: 0.07rem;
        	color: #fffefe;
            text-align: center;
            line-height: 3.5rem;
        }
        .content_box{
            width: 93%;
        	height: 9.2rem;
        	background-color: #ffffff;
        	border-radius: 0.7rem;
            position: absolute;
            top: 15.75rem;
            left: 0;
            right: 0;
            margin: auto;
            box-shadow: 0rem 0rem 0.65rem 0rem rgba(227, 227, 227, 0.59);
            z-index: 2
        }
        .shadow{
            width: 93%;
        	height: 9.2rem;
        	background-image: linear-gradient(-4deg,
        		#53b1ff 0%,
        		#3ca5fd 50%,
        		#2498fa 100%),
        	linear-gradient(
        		#ff0000,
        		#ff0000);
        	background-blend-mode: normal,
        		normal;
        	box-shadow: 0rem 0rem 2rem 0rem
        		rgba(36, 152, 250, 0.59);
        	border-radius: 0.7rem;
        	opacity: 0.4;
            position: absolute;
            top: 15.75rem;
            left: 0;
            right: 0;
            margin: auto;
            z-index: 1
        }
        .content_box_li{
            width: 50%;
            float: left;
            border-right: 0.1rem solid #ededed;
            box-sizing: border-box;
            height: 3.8rem;
            text-align: center;
            margin: 2.7rem 0 0 0
        }
        .content_box_li_title{
            width: 100%;
            font-size: 1.3rem;
            height: 1.3rem;
            line-height: 1.3rem;
            letter-spacing: 0.03rem;
	        color: #36a2fc;
            font-weight: 600;
            margin: 0 0 1rem 0;
        }
        .content_box_li_text{
            width: 100%;
            height: 1.9rem;
        	font-weight: 600;
        	font-size: 1.9rem;
            line-height: 1.9rem;
        	letter-spacing: 0.04rem;
        	color: #36a2fc;
        }
        .fc-000{
            color: #000
        }
        .content_list{
            width: 100%;
            float: left;
            box-sizing: border-box;
            padding: 0 0 0 1.3rem;
        }
        .content_li{
            width: 100%;
            height: 5.95rem;
            border-bottom: 0.05rem solid #ededed;
            box-sizing: border-box;
            position: relative;
        }
        .content_li_title{
            width: 100%;
            height: 1.5rem;
            line-height: 1.5rem;
            font-size: 1.5rem;
            color: #000000;
            margin: 1.4rem 0 0.7rem 0;
            float: left;
        }
        .content_li_time{
            width: 100%;
            height: 1.2rem;
            line-height: 1.2rem;
            font-size: 1.2rem;
            color: #989898;
            float: left;
        }
        .content_li_money{
            position: absolute;
            right: 1.3rem;
            top: 2.35rem;
            height: 1.7rem;
            line-height: 1.7rem;
            font-size: 1.7rem;
            font-weight: 600;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="header">
            <header class="aui-bar aui-bar-nav aui-bar-light inner_header">
              <a class="aui-pull-left aui-btn" onclick="goBack()">
                  <img src="../../../image/capital/icon5.png">
              </a>
              <div class="aui-title">资金明细</div>
            </header>
            <div class="content">
                <div class="content_title">
                    累计收益(元)
                </div>
                <div class="content_money">
                    1800.00
                </div>
                <div class="shadow"></div>
                <div class="content_box">
                    <div class="content_box_li">
                        <div class="content_box_li_title">
                            提现金额(元)
                        </div>
                        <div class="content_box_li_text">
                            268.00
                        </div>
                    </div>
                    <div class="content_box_li">
                        <div class="content_box_li_title fc-000">
                            充值金额(元)
                        </div>
                        <div class="content_box_li_text fc-000">
                            124.00
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content_list">
            <div class="content_li" v-for="(item,key) in list">
                <div class="content_li_title">
                    {{item.pay_way}}
                </div>
                <div class="content_li_time">
                    {{item.add_time}}
                </div>
                <div class="content_li_money">
                    {{item.money}}
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript" src="../../../script/axios.min.js"></script>
<script type="text/javascript" src="../../../script/axios-config.js"></script>
<script type="text/javascript" src="../../../script/zepto.js"></script>
<script type="text/javascript" src="../../../script/vue.min.js"></script>
<script type="text/javascript" src="../../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../../script/utils.js"></script>
<script type="text/javascript" src="../../../script/common.js"></script>
<script type="text/javascript" src="../../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../../script/aui-pull-refresh.js"></script>

<script type="text/javascript">

  apiready = function(){
    //setRefresh()
    var token = $api.getStorage('token');
    var vue = new Vue({
            el: "#app",
            data: {
                token:token,
                page:1,
                all_page:2,
                list:[],
            },
            mounted:function(){
                var that = this
                that._ajax();
                api.addEventListener({
                    name:'scrolltobottom',
                    extra:{
                        threshold:0            //设置距离底部多少距离时触发，默认值为0，数字类型
                    }
                }, function(ret, err){
                    _ajax()
                });

            },
            methods: {
                _ajax(){
                    var that = this
                    if(that.page<that.all_page){
                        var data = {
                            token:$api.getStorage('token'),
                            page:that.page,
                        }
                        Axios.post(window.Url.wallet_list,data).then(function(res){  //钱包余额明细列表
                            console.log(JSON.stringify(res))
                            if(status==1){
                                var list = that.list
                                for(var a=0;a<res.list.length;a++){
                                    list.push(res.list[a]);
                                }
                                that.all_page = res.all_page
                                that.page = res.page
                            }
                        })
                    }
                }
            }
        })
        //刷新
  }

  //刷新
  function setRefresh(){
      var pullRefresh = new auiPullToRefresh({
          container: document.querySelector('.aui-refresh-content'),
          triggerDistance: 100
      }, function(ret) {
          if (ret.status == "success") {
              setTimeout(function() {
                  pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
              }, 1500)
          }
      })
  }
  function goBack(){
      api.closeWin({});
  }
</script>
